发表于 | Edited on | 分类于 | 评论数：

Hexo Next优化&踩坑

一、界面 篇

1 添加动态背景

修改配置文件

在主题配置文件中找到canvas_nest: false，把它改为canvas_nest: true

修改_layout.swig

打开 next/layout/_layout.swig
在 < /body>之前添加代码

1
2
3
4
{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,0" opacity='0.5' zIndex="-2" count="50" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

配置项说明

  • color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
  • opacity: 线条透明度（0~1）, 默认: 0.5
  • count: 线条的总数量, 默认: 150
  • zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

2 直接展开文章全部目录

搜索打开这个文件：sidebar-toc.styl

把下面的内容注释掉：

1
2
3
4
5
6
7
//取消逐渐展开，改为直接展开所有TOC
//.post-toc .nav .nav-child { display: none; }
.post-toc .nav .active > .nav-child { display: block; }
.post-toc .nav .active-current > .nav-child {
  display: block;
  & > .nav-item { display: block; }
}

3 添加文章结束标记

在 next\layout_macro\post.swig 中wechat-subscriber.swig 上面加入如下代码：

1
2
3
4
<!-- 添加文章结束标记 -->
{% if not is_index %}
	<div style="text-align:center;color: #000;font-size:14px;">----------------- The End -----------------</div>
{% endif %}

4 实现主页文章预览效果

进入hexo博客项目的themes/next目录
用文本编辑器打开_config.yml文件
搜索”auto_excerpt”,找到如下部分：

1
2
3
4
5
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

把enable值设置为true，就可以控制文章在主页的显示了

5 添加MathJax数学公式支持

在主题中开启mathjax开关

如何使用了主题了，别忘了在主题（Theme）中开启mathjax开关，下面以next主题为例，介绍下如何打开mathjax开关。

进入到主题目录，找到_config.yml配置问题，把mathjax默认的false修改为true，具体如下：

1
2
3
4
# MathJax Support
mathjax:
  enable: true
  per_page: true

别着急，这样还不够，还需要在文章的Front-matter里打开mathjax开关，如下：

1
2
3
4
5
6
---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
--

更换Hexo的markdown渲染引擎

hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug，两者比较接近，也比较轻量级。

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

执行上面的命令即可，先卸载原来的渲染引擎，再安装新的。

然后，跟换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行的escape变量的值做相应的修改：

1
2
//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#+\-.!_>])/

同时把第20行的em变量也要做相应的修改。

1
2
//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

重新启动hexo（先clean再generate）,问题完美解决。

6 调整页面CSS布局

为了加宽文章页面显示，在下面两个文件中添加自定义代码
在 themes\next\source\css_custom\custom.styl 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// Custom styles.
//边框效果
/*
// 最上面
.content-wrap {
	padding: 0 40px 40px 40px;
}
.posts-expand {
	padding-top: 0;
}
// 文章
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 1px 1px 1px 1px rgba(202, 203, 203, .5);
   -moz-box-shadow: 1px 1px 1px 1px rgba(202, 203, 204, .5);
  }

// 右上
.sidebar-position-right .header-inner {
   -webkit-box-shadow: 1px 1px 1px 1px rgba(202, 203, 203, .5);
   -moz-box-shadow: 1px 1px 1px 1px rgba(202, 203, 204, .5);
}
// 右下
.sidebar .sidebar-inner {
   -webkit-box-shadow: 1px 1px 1px 1px rgba(202, 203, 203, .5);
   -moz-box-shadow: 1px 1px 1px 1px rgba(202, 203, 204, .5);
}
// 右上
.sidebar-position-right .header-inner {
   -webkit-box-shadow: 0 1px 0 0 #262a30;
   -moz-box-shadow: 0 1px 0 0 #262a30;
}
*/
// 最下面
.sidebar-position-right .footer-inner {
	padding-left: 40px;
	padding-right: 280px;
}

// 首页文章添加分割线
.posts-expand .post-eof {
    display: block;
    margin: 80px auto 60px;
    width: 61.8%;
    height: 1px;
    background: #bbb;
    text-align: center;
}

.sidebar-inner {
	padding: 20px 0 0 0;
}
.music163 {
	margin: 20px 0 0 0;
}

在 D:\wxy555123.github.io\themes\next\source\css_variables\custom.styl 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// base.styl		Layout sizes
// --------------------------------------------------

//$main-desktop                   = 960px 
$main-desktop                   = 1230px  //new 主宽度，也调大防止sidebar遮挡
$main-desktop-large             = 1200px

//$content-desktop                = 700px
$content-desktop                = 990px //new 文章宽度调大
$content-desktop-large          = 900px

$content-desktop-padding        = 40px
$content-tablet-padding         = 10px
$content-mobile-padding         = 8px

$sidebar-desktop                = 240px

$footer-height                  = 50px

$gap-between-main-and-footer    = 100px

7 添加 Gitment 评论系统

简介

本文介绍hexo next主题(5.1.2)集成giment评论系统的过程。所谓gitment就是把评论放到github的issues系统里，评论支持md，比较适合程序员.

一.注册OAuth Application

点击https://github.com/settings/applications/new注册，注意Authorization callback URL填自己的网站urlhttp://yangq.me/.记下Client ID和Client Secret.

二.修改themes/next/_config.yml

在其中添加:

1
2
3
4
5
6
7
8
9
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
  enable: true
  githubID: yourid
  repo: yourrepo
  ClientID: yourid
  ClientSecret: yoursecret
  lazy: true123456789

注意:格式要正确，该空格的一定要空格。所有的yourXXX都换成自己的.

三.修改gitment.swig

在主题下layout/_third-party/comments/目录下中修改文件gitment.swig使得能够正确初始化：

修改红框标记的id字段，用日期时间戳代替，使得id不会超过50个字符

8 博文压缩

博文压缩用于加快网站访问速度

step1:

在根目录新建 gulpfile.js 文件

step2:

方法一，使用下面代码和命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

命令为 hexo g&&gulp


方法二，使用下面代码和命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin');
//JS压缩
gulp.task('uglify', function() {
    return gulp.src('././public/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('././public/js/'));
});
//public-fancybox-js压缩
gulp.task('fancybox:js', function() {
    return gulp.src('././public/fancybox/jquery.fancybox.js')
        .pipe(uglify())
        .pipe(gulp.dest('././public/fancybox/'));
});
//public-fancybox-css压缩
gulp.task('fancybox:css', function() {
    return gulp.src('././public/fancybox/jquery.fancybox.css')
        .pipe(cssmin())
        .pipe(gulp.dest('././public/fancybox/'));
});
//CSS压缩
gulp.task('cssmin', function() {
    return gulp.src('././public/css/style.css')
        .pipe(cssmin())
        .pipe(gulp.dest('././public/css/'));
});
//图片压缩
gulp.task('images', function() {
    gulp.src('././public/img/*.*')
        .pipe(imagemin({
            progressive: false
        }))
        .pipe(gulp.dest('././public/img/'));
});
gulp.task('build', ['uglify', 'cssmin', 'images', 'fancybox:js', 'fancybox:css']);

命令为 hexo g&&gulp build

二、操作 篇

1 Hexo命令

  • 安装主题：用git clone到themes文件夹中

  • 生成静态文件：hexo g

  • 启动本地服务器：hexo s

  • 发布到远程网站：hexo d （hexo d -g 生成的后自动发布）

    ​

  • 创建文章：hexo new “标题” （默认就在“post”目录里）

  • 创建草稿：hexo new draft “标题”

  • 把草稿转到“post”目录：hexo publish “标题”

    ​

    （注：中间的命令可以用哦个首字母简写）

2 修改Hexo生成文件模版

可在根目录 scaffolds 文件夹下修改3类文章模版

3 添加创建文件后，用vscode自动打开脚本

在根目录下新建 scripts 文件夹，里面新建 js 文件 名字随意，代码如下：

1
2
3
4
5
var exec = require("child_process").exec;

hexo.on("new", function(data) {
	exec("Code.exe " + [data.path]);
});

以后每次执行 hexo n 新建文件后都会自动运行 vscode 打开编辑

4 修改node.js默认启动路径

右键node.js快捷方式，把“起始位置”属性修改为以下内容：

1
D:\wxy555123.github.io\

꧁༺The༒End༻꧂
Error: Comments Not Initialized
Styling with Markdown is supported
Powered by Gitment